<!DOCTYPE html>
<html lang="en">
<!--计时器 history-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript">
      var count=0;
      var stop_i=0;
      //timeout很少用了。一般都会用setInterval
      function time(){
          document.getElementById("iusename").value=count;
          count+=1;
         stop_i= setTimeout("time()",100);//正常settimeout只执行一次，然后就失效，这里只是嵌套了，所以才一直在变
          if (count>100){
              return;
          }
      }
      function stop_timeout() {
          clearTimeout(stop_i);//清除timeout；
      }
      function start_timeout() {
          setTimeout(time,100); //setTimeout只执行一次。
      }



      function setInterval_pract(){
          var colck=new Date();
          var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
          var time_demo=colck.getFullYear()+"年"+colck.getMonth()+"月"+colck.getDate()+"日"+weekday[colck.getDay()]+colck.getHours()+":"+
                          colck.getMinutes()+":"+colck.getSeconds();
          document.getElementById("ipadd").value=time_demo;
      }
      var stopInterval_time;
        function stop_intervaltime() {
            clearInterval(stopInterval_time);//clear 里面的参数就是setInterval的返回值。
        }

      function start_interval(){
          stopInterval_time=setInterval(setInterval_pract,100);//只要设置这个就一直自己调用自己 直到ClearInterval
        }

    </script>

    <style type="text/css">
        body{
            padding-top: 50px;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header" >
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wer" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">
            brand
        </a>
    </div>
    <div class="collapse navbar-collapse" id="wer">
        <ul class="nav  navbar-nav">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li class="dropdown">
                <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                    dropdown
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">header</li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </ul>
    </div>

</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
            <form action="" class="form-horizontal">
                <div class="form-group" style="border: 1px solid red;">
                    <label for="iusename" class="control-label col-md-2">count</label>
                    <div class="input-group col-md-10">
                        <div class="input-group-addon ">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                        <input type="text" class="form-control" id="iusename" placeholder="count" onclick="time()">
                    </div>
                </div>
                <button type="button" onclick="start_timeout()" class="btn btn-info">startCout</button>
                <button type="button" onclick="stop_timeout()" class="btn btn-info">stopCout</button>
                <div class="form-group" style="border: 1px solid red;">
                    <label for="ipadd" class="control-label col-md-2">
                        time
                        <span class="glyphicon glyphicon-align-center"></span>
                    </label>
                    <div class="col-md-10 input-group">
                        <input type="text" class="form-control" id="ipadd">
                    </div>
                </div>
                <button type="button" class="btn btn-default" onclick="start_interval()">startTime</button>
                <button type="button" class="btn btn-primary " onclick="stop_intervaltime()">stopTime</button>
            </form>
            <!--setInterval-->

        </div>
        <div class="col-md-4">
        </div>
    </div>


</div>


<script type="text/javascript" src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>